<template>
  <div class="group-container">
    <div class="group left-group" ref="left" @mousewheel.prevent="handleLeftScroll">
      <!-- 左侧按钮组 -->
      <div v-for="(item, index) in leftList" :key="index">
        <!-- 类型是否为导入 -->
        <template v-if="hasImportType(item)">
          <!-- 导入Excel -->
          <g-excel-import
            :ref="item.eventName"
            :text="l(item?.title ?? '')"
            :icon="item.icon"
            type="default"
            @fileUploadedSuccessEvent="handleToobarBtnClick(item.eventName, $event)"
          >
            <delete-outlined />
            <span>{{ l('BatchDelete') }}</span>
          </g-excel-import>
        </template>
        <template v-else>
          <a-button
            v-bind="{
              type: item.type,
              size: item.size,
              disabled: item.disable,
              shape: item.shape,
            }"
            :style="{
              width: !!item.width ? item.width + 'px' : 'auto',
              borderRadius: '4px',
              borderWidth: '1px',
            }"
            class="flex-center"
            :class="formatClass(item.className)"
            @click="handleToobarBtnClick(item.eventName)"
          >
            <template #icon>
              <svg
                v-if="!!item.icon"
                class="icon"
                aria-hidden="true"
                :style="{ 'margin-right': item.title ? '8px' : 0 }"
              >
                <use :xlink:href="`#${item.icon}`"></use>
              </svg>
            </template>
            <span>{{ l(item?.title ?? '') }}</span>
          </a-button>
        </template>
      </div>
    </div>
    <div class="group right-group" ref="right" @mousewheel.prevent="handleRightScroll">
      <!-- 右侧按钮组 -->
      <div v-for="(item, index) in rightList" :key="index">
        <!-- 类型是否为导入 -->
        <template v-if="hasImportType(item)"> </template>
        <template v-else>
          <a-button
            v-if="true"
            v-bind="{
              type: item.type,
              size: item.size,
              shape: item.shape,
            }"
            :style="{
              width: !!item.width ? item.width + 'px' : 'auto',
              borderRadius: '4px',
              borderWidth: '1px',
            }"
            :disabled="item.disable"
            class="flex-center"
            :class="formatClass(item.className)"
            @click="handleToobarBtnClick(item.eventName)"
          >
            <template #icon>
              <svg
                v-if="!!item.icon"
                class="icon"
                aria-hidden="true"
                :style="{ 'margin-right': item.title ? '8px' : 0 }"
              >
                <use :xlink:href="`#${item.icon}`"></use>
              </svg>
            </template>
            <span>{{ l(item?.title ?? '') }}</span>
          </a-button>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import ToolbarMixins from '../../mixins/toolbar-mixins';
  import GExcelImport from '/@/shared/components/g-excel-import/index.vue';
  export default defineComponent({
    name: 'g-dynamic-table-toolbar',
    components: {
      GExcelImport,
    },
    mixins: [ToolbarMixins],
  });
</script>
<style lang="less" scoped>
  @import '../../style/theme.less';
  .group-container {
    display: flex;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    align-items: center;

    .group {
      width: 100%;
      height: calc(100% + 8px);
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      margin-right: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .right-group {
      &::before {
        content: '';
        flex: 1;
      }
    }
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
